<template>
   <div class="Contract">
    <!-- <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
      <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
    <pdf :page="pageNum" :src="url"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum=$event"
      @loaded="loadPdfHandler"></pdf> -->
    <iframe class="" :src="pathUr" ></iframe>
  </div>
</template>

<script>
// import pdf from 'vue-pdf';
export default {
  name: 'Pdfpreview',
  // components: {
  //   pdf
  // },
  props: {
    files: {
      default: undefined
    }
  },
  data () {
    return {
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0 // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    }
  },
  created () {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    // this.pathUr = pdf.createLoadingTask(this.files, {withCredentials: true})
    this.pathUr = this.files
  },
  mounted () {
  },
  computed: {},
  methods: {
    // 上一页
    prePage () {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页
    nextPage () {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    // pdf加载时
    loadPdfHandler (e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    }
  }
}
</script>
<style lang="scss" scoped>
.Contract{
  height: 100%;
  iframe{
    width: 100%;
    height: 100%;
    border: none;
  }
}
</style>
